<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>微博发布效果</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .weibo {
      width: 600px;
      border: 1px solid #ccc;

      margin: 100px auto;
      padding: 10px;

    }

    .weibo-text {
      width: 590px;
      height: 140px;
      padding: 5px;
      border: 1px solid #ccc;
      outline: none;
      resize: none;
    }

    .weibo-text:focus {
      border-color: #f60;
    }

    .weibo-btn {
      width: 80px;
      height: 30px;
      background-color: #f90;
      color: #fff;
      border: 0 none;
      margin-top: 5px;
      border-radius: 3px;
      cursor: pointer;
      outline: 0 none;
    }

    .weibo-list {
      padding-top: 10px;
    }

    .weibo-list li {
      font-size: 14px;
      line-height: 30px;
      border-bottom: 1px dotted #ccc;
      overflow: hidden;
    }

    .weibo-list li p {
      float: left;
    }

    .weibo-list li span {
      float: right;
      cursor: pointer;
    }

    .weibo-list li input {
      height: 24px;
      line-height: 24px;
      width: 300px;
      font-size: 14px;
      border: 0 none;
    }

    .time {
      margin-right: 10px;
      font-style: normal;
      float: right;
    }
  </style>
</head>

<body>
  <div class="weibo">
    <textarea class="weibo-text"></textarea>
    <input class="weibo-btn" value="发布" type="button">
    <ul class="weibo-list">
      <!-- <li>
            <p class="content">快来收了这九款用上就停不下来的应用吧！！</p>
            <span class="time"></span>
            <span class="del">删除</span>
        </li> -->
    </ul>
  </div>
</body>
<script>
     function patchZero(v) {
    return v < 10 ? '0' + v : v;
  }

  function formatDate() {
    var now = new Date();
    var y = now.getFullYear();
    var m = now.getMonth() + 1;
    var d = now.getDate();
    var h = now.getHours();
    var mm = now.getMinutes();
    var s = now.getSeconds();
    return y + '-' + patchZero(m) + '-' + patchZero(d) + ' ' + patchZero(h) + ":" + patchZero(mm) + ':' + patchZero(s);
  }
var text=document.querySelector('.weibo-text');
var btn=document.querySelector('.weibo-btn');
var ul=document.querySelector('.weibo-list');
var pos=[];
btn.onclick=function(){
  var content=text.value;
  var time=formatDate();
  var id=Date.now()+''+Math.floor(Math.random()*10000);/*1*/
  // console.log(id);
  var li=document.createElement('li');
  li.innerHTML='<p class="content">'+content+'</p>'+
            '<span class="del" data-id="'+id+'">删除</span>'+
            '<span class="time">'+time+'</span>';
  ul.insertBefore(li,ul.children[0]);        /*2*/
  pos.unshift({
    content:content,
    time:time,
    id:id
  });
  var wbshuju=JSON.stringify(pos);
  // console.log(wbshuju);
  localStorage.setItem('shujuchuchun',wbshuju);
  text.value='';
}
// 实现数据打开刷新仍然出现在页面上
var wbshuju=localStorage.getItem('shujuchuchun');
var pos=JSON.parse(wbshuju);
if(pos===null){
  pos=[];
}
pos.forEach(function(e){
  var li=document.createElement('li');
  li.innerHTML='<p class="content">'+e.content+'</p>'+
            '<span class="del" data-id="'+e.id+'">删除</span>'+
            '<span class="time">'+e.time+'</span>';
   // 插入到ul的末尾
   ul.appendChild(li);       /*3*/
})
// 回车键合并发布
text.onkeydown=function(e){
  if(e.ctrlKey && e.keyCode===13){
    btn.onclick();
  }
}
// 实现删除
// 用事件委托
// 委托到ul固定元素身上
ul.addEventListener('click',function(e){
  console.log(133);
if(e.target.nodeName==='SPAN'){
  var fuyan=e.target;
  var li=fuyan.parentNode;
  ul.removeChild(li);     /*4*/
}
// 要把li对应的数据删除掉
// 先得到点击的按钮的id,然后遍历回调判断是否有同个id,有的话就删除
var delId=e.target.dataset.id;  /*5*/
console.log(delId);
pos.forEach(function(a,i){
  if(a.id===delId){
    pos.splice(i,1);
  }
});
// 把新的数组，直接存储到localstorage里面，覆盖掉原来的内容就把删除的数据删掉了
var shuju=JSON.stringify(pos);
localStorage.setItem('shujuchuchun',shuju);
})




</script>
</html>
